<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<!-- <view class="">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
			</u-dropdown>
		</view> -->
		<view>
			<u-tabs-swiper ref="uTabs" :list="orderTab" :current="current" @change="tabsChange" is-scroll="false"
				active-color="#558EE7" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			class="order-swiper-box">
			<swiper-item class="swiper-item" v-for="(item, index) in orderTab" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="">
						<travel-waterfall :travelListData="travelListData" @toTravelPage="toTravelPage"></travel-waterfall>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import travelWaterfall from '@/components/xh-travel/xh-travel.vue'
	export default {
		components: {
			travelWaterfall
		},
		data() {
			return {
				pageNo:1,
				pullStatus:true,
				travelListData:[],
				orderTab: [{
					name: '全部'
				}, {
					name: '热点景区'
				}],
				value1: 1,
				value2: 2,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onLoad() {
			this._initSendtravel();
		},
		methods: {
			// 跳转到旅游详情页
			toTravelPage(e){
				uni.navigateTo({
					url:"/pages/home/travel/travelDetail?id="+e.id+"&title="+e.title
				})
			},
			
			// 请求旅游接口
			async _initSendtravel() {
				let travel = await this.$myRequest({
					url: '/rural-revitalization/rtc/travelDetails/list',
					method: "GET",
					data:{
						pageNo:this.pageNo,
						pageSize:10
					}
				})
				if(travel.code == 200){
					// console.log(travel.result.records.length)
					if(travel.result.records.length <10){
						this.pullStatus = false
					}
					let travelNumber = travel.result.records.length;
					// this.travelListData = travel.result.records;
					for (let i = 0; i < travelNumber; i++) {
						let index = this.$u.random(0, travelNumber - 1);
						// // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(travel.result.records[index]))
						item.guid = this.$u.guid();
						let list =this.travelListData;
						this.travelListData = list.concat(item)
						// this.travelListData.push(item);
						// console.log(item)
					}
					
					
				}else{
					console.log(travel)
				}
			},
			
			
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.pullStatus){
					this.pageNo++
					this._initSendtravel();
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.order-swiper-box {
		flex: 1;
	}
</style>
